<template>
	<view>
		<view class="wrapper">
			<view
				class="baseText"
				:class="{ text: enableButton && lines > line }"
				:style="enableButton && lines > line && '-webkit-line-clamp:' + lineNum"
			>
				<text class="placeholder">
					{{ placeholder }}
				</text>
				<view class="btn" @tap.stop="showMore" v-if="lineNum === line && enableButton && lines > line">
					<text>{{ expandText }}</text>
					<image v-if="imgUrl" :src="imgUrl" mode="" class="down-icon"></image>
				</view>
				{{ dt ? dt : '' }}
				<slot></slot>
				<view class="down" @tap.stop="showMore" v-if="lineNum !== line">
					{{ foldHint }}
					<image v-if="imgUrl" :src="imgUrl" mode="" class="up-icon"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		// 展示多少行
		line: {
			type: [Number, String],
			default: 1,
		},
		// 文本
		dt: {
			type: [String],
			default: '',
		},
		enableButton: {
			type: Boolean,
			default: true,
		},
		// 自定义展开提示
		expandText: {
			type: String,
			default: '展开',
		},
		// 自定义收起提示
		foldHint: {
			type: String,
			default: '收起',
		},
		// 展开收起图片地址
		imgUrl: {
			type: String,
			default: '收起',
		},
	},
	data() {
		return {
			lineNum: 0,
			// 是否隐藏多余行。初始状态不隐藏
			isHide: true,
			// 全量所占文本高度
			textHeight: 0,
			// 单行文本所占高度
			lineHeight: 1,
			// 占位文本
			placeholder: '占位',
		};
	},
	created() {
		this.lineNum = this.line;
	},
	watch: {
		line() {
			this.lineNum = this.line;
		},
		dt() {
			let that = this;
			setTimeout(() => {
				let query = uni.createSelectorQuery().in(that);
				// 获取所有文本在html中的高度
				query
					.select('.baseText')
					.boundingClientRect((data) => {
						that.textHeight = data.height;
					})
					.exec();
			}, 100);
		},
	},
	mounted() {
		if (this.enableButton) {
			let query = uni.createSelectorQuery().in(this);
			// 获取所有文本在html中的高度
			query
				.select('.baseText')
				.boundingClientRect((data) => {
					this.textHeight = data.height;
				})
				.exec();

			// 通过占位元素获取单行文本的高度
			query
				.select('.placeholder')
				.boundingClientRect((data) => {
					this.lineHeight = data.height;
				})
				.exec();
		}
		// 获取单行文本高度后，置空占位元素，使其释放占位
		this.placeholder = '';
	},
	computed: {
		// 全文本所占总行数
		lines() {
			if (!this.enableButton) {
				return this.line;
			}
			return Math.floor(this.textHeight > 0 && this.lineHeight > 0 ? this.textHeight / this.lineHeight : 0);
		},
	},
	methods: {
		showMore() {
			this.lineNum = this.lineNum === this.line ? 999 : this.line;
		},
	},
};
</script>

<style scoped>
.wrapper {
	display: flex;
}

.text {
	font-size: 26rpx;
	line-height: 38rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: justify;
	/* display: flex; */
	display: -webkit-box;
	/* -webkit-line-clamp: 1; */
	-webkit-box-orient: vertical;
	position: relative;
}
.baseText {
	font-size: 26rpx;
	line-height: 38rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: justify;
	/* display: flex; */
	display: -webkit-box;
	/* -webkit-line-clamp: 1; */
	-webkit-box-orient: vertical;
	position: relative;
}
.text::before {
	content: '';
	height: calc(100% - 38rpx);
	float: right;
}

.btn {
	/* display: flex; */
	/* margin-top: 10rpx; */
	float: right;
	clear: both;
	font-size: 26rpx;
	font-weight: 400;
	color: #21694f;
	line-height: 38rpx;
}
.down {
	display: inline-block;
	font-size: 26rpx;
	font-weight: 400;
	color: #21694f;
	line-height: 38rpx;
}
.down-icon {
	transform: translateY(2rpx);
	width: 26rpx;
	height: 26rpx;
}
.up-icon {
	transform: rotate(180deg) translateY(-4rpx);
	width: 26rpx;
	height: 26rpx;
}
</style>
